<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .da {
            width: 600px;
            height: 500px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        th,
        td {
            width: 200px;
            height: 40px;
            border: 1px solid black;
        }

        .mtk {
            width: 200px;
            height: 200px;
            background-color: #ffc0cb;
            border: 3px solid red;
            padding-top: 20px;
            position: absolute;
            right: 500px;
            bottom: 200px;
            display: none;
        }

        input {
            margin-top: 20px;
        }

        .tj {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="da">
        <button onclick="tj()">添加</button>
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" class="qx" onclick="xq()"> 全选</th>
                    <th>用户名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody align="center"></tbody>
        </table>
    </div>
    <div class="mtk">
        <h4>添加数据</h4>
        <input type="text" value="用户名" onfocus="f1()" class="yhm"><br>
        <input type="text" value="年龄" onfocus="f2()" class="nl"><br>
        <button class="tj" onclick="add()">添加</button>
    </div>
</body>

</html>
<script>
    var mtk = document.querySelector(".mtk")
    var yhm = document.querySelector(".yhm")
    var nl = document.querySelector(".nl")
    var tb = document.querySelector("tbody")
    var qx = document.querySelector(".qx")

    function set(arr) {
        localStorage.setItem('data', JSON.stringify(arr))
    }
    function get() {
        var data = localStorage.getItem('data')
        if (data != null) {
            return JSON.parse(data)
        } else {
            return []
        }
    }

    function tj() {
        mtk.style.display = 'block'
        yhm.value='用户名'
        nl.value='年龄'
    }

    function add() {
        var data = get()
        data.push({
            yhm:yhm.value,
            nl:nl.value
        })
        set(data)
        xr()
    }
    function xr(){
        tb.innerHTML=''
        var data=get()
        for(i=0;i<data.length;i++){
            var tr=document.createElement("tr")
            if(qx.checked){
            tr.innerHTML=`
            <td><input type="checkbox" checked class='fxk' onclick='fx()'></td>
            <td>${data[i].yhm}</td>
            <td>${data[i].nl}</td>
            <td><button onclick='sc(${i})'>删除</button></td>
            `;
            }else{
            tr.innerHTML=`
            <td><input type="checkbox" class='fxk' onclick='fx()'></td>
            <td>${data[i].yhm}</td>
            <td>${data[i].nl}</td>
            <td><button onclick='sc(${i})'>删除</button></td>
            `;
            }
            tb.appendChild(tr)
            yhm.value=''
            nl.value=''
            mtk.style.display='none'
        }
    }
    xr()
    function f1(){
        yhm.value=''
    }
    function f2(){
        nl.value=''
    }
    function sc(i){
        var data=get()
        data.splice(i,1)
        set(data)
        xr()
    }
    function xq(){
        var fxk=document.querySelectorAll('.fxk')
        for(i=0;i<fxk.length;i++){
            fxk[i].checked=qx.checked
        }
    }
    function fx(){
        var fxk=document.querySelectorAll('.fxk')
        for(i=0;i<fxk.length;i++){
            fxk[i].onclick=function(){
                var count=document.querySelectorAll(".fxk:checked")
                if(count.length==fxk.length){
                    qx.checked=true
                }else{
                    qx.checked=false
                }
            }
        }
    }
</script>